<template>
    <div class="edu-page-warp">
        <el-card shadow="never" body-style="padding: 24px;" class="card-margin clearfix">
            <h1 class="condition-title">培养方案开关设置</h1>
            <el-form
                ref="queryForm"
                :model="queryForm"
                label-position="right"
                label-width="90px"
                :rules="cultureSchemeRules"
                class="clearfix"
            >
                <el-row :gutter="24">
                    <el-col :span="10">
                        <el-form-item :label="$t('message.startDate')+':'" prop="startTime">
                            <el-col :span="11" style="padding:0">
                                <el-date-picker
                                style="width: 100%;"
                                v-model="queryForm.startTime"
                                type="datetime"
                                placeholder="选择日期"
                            ></el-date-picker>
                            </el-col>
                           <el-col class="line" :span="2">-</el-col>
                            <el-col :span="11" style="padding:0">
                                 <el-date-picker
                                style="width: 100%;"
                                v-model="queryForm.stopTime"
                                type="datetime"
                                placeholder="选择日期"
                            ></el-date-picker>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="10">
                        <el-form-item label="年级:" prop="grade">
                            <el-select v-model="queryForm.grade"
                            multiple
                            style="width: 100%;">
                                <el-option
                                    v-for="item in options.grade"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="10" class="clearfix">
                        <el-form-item label="学院:" prop="deptCode">
                            <el-select
                                v-model="queryForm.deptCode"
                                style="width: 100%"
                                multiple
                            >
                                <el-option
                                    v-for="item in options.faculty"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item style="margin-bottom:30px;">
                            <el-button
                                type="primary"
                                @click="submit"
                            >提交</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { findProfessionByParam , schemeAddSet, schemefindResult } from "common/src/api/culture/cultruescheme";
import { findFaculty } from "common/src/api/faculty";
import UTILS from "common/src/utils/utils";
export default {
     name: "cultureShcemeSetting",
    data() {
         //绑定年级
        let now = new Date();
        let currentYear = now.getFullYear() + 1,
            minYear = currentYear - 11;
        let curGrade = [];
        for (let grade = currentYear; grade > minYear; grade--) {
            let obj = { label: grade, value: grade.toString() };
            curGrade.push(obj);
        }
        return {
            queryForm: {
                grade: "", // 年级
                deptCode: "", // 学院
                startTime: "", // 开始时间
                stopTime: "", // 结束时间
                projId:""
            },
            // 下拉相关选项数据
            options: {
                grade: curGrade,
                faculty: [],
            },
            cultureSchemeRules: {
                startTime: [
                    {
                        required: true,
                        message: "请选择时间",
                        trigger: "change"
                    }
                ],
                grade: [
                    {
                        required: true,
                        message: "请选择年级",
                        trigger: "change"
                    }
                ],
                deptCode: [
                    {
                        required: true,
                        message: "请选择学院",
                        trigger: "change"
                    }
                ],
            },
        };
    },
    created() {
        this.getSet();
        this.initOptions(); 
    },
    methods: {
        submit() {
            this.$refs['queryForm'].validate((valid) => {
                if (valid) {
                    let queryForm = this.queryForm
                    if (queryForm.startTime && typeof(queryForm.startTime) != 'number'){
                        queryForm.startTime =queryForm.startTime.getTime();
                    }   
                    if (queryForm.stopTime && typeof queryForm.stopTime != 'number'){
                        queryForm.stopTime = queryForm.stopTime.getTime();
                    }
                    queryForm.grade = queryForm.grade.toString();
                    queryForm.deptCode = queryForm.deptCode.toString();
                    schemeAddSet(queryForm).then(res =>{
                        if (res.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '设置成功!',
                        });
                        this.getSet();
                        }
                    }).catch(error=>{
                        this.queryForm.grade =  queryForm.grade.split(",")
                        this.queryForm.deptCode =  queryForm.deptCode.split(",")
                    })
                }
            })   
        },
        initOptions() {
            findFaculty().then(res => { 
                let data = {"X_YX": res.data};
                UTILS.fillSelect({ faculty: "X_YX" }, data, this.options);
            });
             let currentUser =
                (this.$store.state.session && this.$store.state.session.user) ||
                JSON.parse(localStorage.getItem("user"));
            this.queryForm.projId = currentUser.currentManageDptId;
        },
        getSet(){
            let data = {
                grade: "", // 年级
                deptCode: "", // 学院
                startTime: "", // 开始时间
                stopTime: "", // 结束时间
                projId:this.queryForm.projId
            }
            schemefindResult(data).then(res =>{
                if(res.code == 200){
                    this.queryForm.grade =  res.data.grade.split(",")
                    this.queryForm.deptCode =  res.data.deptCode.split(",")
                    this.queryForm.startTime = res.data.startTime
                    this.queryForm.stopTime = res.data.stopTime
                      this.$refs['queryForm'].clearValidate()
                       
                }
            })
        }
    }
};
</script>

<style scoped>
    /*ie11 css hack*/ 
    @media all and (-ms-high-contrast:none) { 
        *::-ms-backdrop,.ie-hack{ height: 51.89px !important; }
    } 
    .div-main {
        margin-bottom: 16px;
    }
    .waining-color i{
       color:#1a68df;
       font-size: 24px;
    }
    .waining-color span{
        margin-left: 10px;
       font-size: 20px;
       font-weight: bold;
    }
    .line{
        text-align: center;
    }
</style>
